<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>电影售票</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="/js/top.js"></script>
    <script src="/sign/js/sign.js"></script>
<!--    https://www.yidepiao.com/movie/4596 -->
</head>
<body>
<div id="app">
    <el-container>
        <top></top>
        <el-main>
            <div class="c900">
                <el-card>
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-row :gutter="10">
                                <el-col :span="8">
                                    <img :src="scheduleInfo==null?'':scheduleInfo.movie.img" style="max-height: 200px; max-width: 100px; object-fit: cover">
                                </el-col>
                                <el-col :span="16">
                                    <div class="grid2 detail">
                                        <label>影片：</label><b>{{scheduleInfo==null?"":scheduleInfo.movie.name}}[{{scheduleInfo==null?"":scheduleInfo.hall.type}}]</b>
                                        <label>影厅：</label><span>{{scheduleInfo==null?"":scheduleInfo.hall.name}}({{scheduleInfo==null?"":scheduleInfo.hall.num}}座)</span>
                                        <label>场次：</label><time>{{scheduleInfo==null?"":new Date(scheduleInfo.start).toLocaleDateString()}}
                                        ({{days[scheduleInfo==null?"":new Date(scheduleInfo.start).getDay()]}}) {{scheduleInfo==null?"":new Date(scheduleInfo.start).toLocaleTimeString()}}</time>
                                        <label>票价：</label><span>{{scheduleInfo==null?"":scheduleInfo.price}}元（含服务费）</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="12">
                            <el-row :gutter="10">
                                <el-col :span="8">
                                    <img :src="scheduleInfo==null?'':scheduleInfo.hall.studios.image" style="max-height: 200px; max-width: 100px; object-fit: cover">
                                </el-col>
                                <el-col :span="16">
                                    <div class="grid2 detail">
                                        <label>影院：</label><b>{{scheduleInfo==null?"":scheduleInfo.hall.studios.name}}</b>
                                        <label>影院地址：</label><span>{{scheduleInfo==null?"":scheduleInfo.hall.studios.addr}}</span>
                                        <label>影院描述：</label><time>{{scheduleInfo==null?"":scheduleInfo.hall.studios.des}}</time>
                                    </div>
                                </el-col>
                            </el-row>

                        </el-col>
                    </el-row>
                </el-card>
                <el-card>
                    <div class="flex" style="justify-content: center; margin: 30px">
                        <h3 class="title" style="padding: 15px 30px; border-radius: 5px">{{scheduleInfo==null?"":scheduleInfo.hall.name}}({{scheduleInfo==null?"":scheduleInfo.hall.num}}座)</h3>
                    </div>
                    <div class="seats">
                        <button class="seat" v-for="i in sits" :style="i.state==0?'':'background-color: red'" @click="select(i)">{{i.sit}}</button>
                    </div>
                    <hr>
                    <el-row>
                        <el-col span="12">
                            您选择的座位：
                            <button class="seat" v-for="i in buy.sits">{{i.sit}}</button>
                            <a @click="buy = {num:0,sits:[]};getScheduleInfo();">重新选座</a>
                        </el-col>
                        <el-col span="12">
                            输入购票手机号码:
                            <el-input style="width: auto" v-model="phone"></el-input>
                            <el-button type="primary" @click="next">下一步</el-button>
                        </el-col>
                    </el-row>
                    <hr>
                    温馨提示：
                    <ul>
                        <li>选择您要预订的座位单击选中，重复点击取消所选座位；</li>
                        <li>每笔订单最多可选购6张电影票；情侣座不单卖；</li>
                        <li>选座时，必须选择相邻座位，请不要留下单个座位；</li>
                        <li>部分影院3D眼镜需要押金，请观影前准备好现金；</li>
                        <li>点击“下一步”进入付款页面后，请在15分钟内完成支付，超时系统将释放您选定的座位。</li>
                    </ul>
                </el-card>
            </div>
        </el-main>
        <el-footer class="flex title" style="justify-content: center;height: 30px">
            <a href="http://www.hyycinfo.com" target="_blank">源辰信息科技</a>
        </el-footer>
    </el-container>
</div>
</body>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            id:0,
            days:['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
            scheduleInfo:null,
            sits:[],
            buy:{num:0,sits:[]},
            soldSits:[],
            phone:''
        },
        methods:{
            getScheduleInfo(){
                axios.get(`schedule/findByIdSchedule?id=${this.id}`).then(res=>{
                    this.scheduleInfo = res.data;
                    console.log(res.data);
                    res.data.orders.forEach(o=>{
                        if(o.sitnum.concat(";")){
                            let sits = o.sitnum.split(";")
                            sits.forEach(sit=>{
                                this.soldSits.push({sit:sit,state:1});
                            })
                        }else{
                            this.soldSits.push({sit:o.sitnum,state:1});
                        }
                    });

                    for (let i = 0; i < res.data.hall.num; i++) {
                        this.sits[i]={sit:i+1,state:0};
                        this.soldSits.forEach(j=>{
                            if (i+1 == j.sit){
                                this.sits[i].state = 1;
                            }
                        })
                    }
                });
            },
            select(i){
                for (let j = 0; j < this.soldSits.length; j++) {
                    if (i.sit == this.soldSits[j].sit){
                        this.$message("该座位已售出");
                        return;
                    }
                }
                const index = this.buy.sits.findIndex(b=>b.sit==i.sit);
                if(index!=-1){
                    i.state = 0;
                    this.buy.sits.splice(index, 1);
                    this.buy.num--;
                    return;
                }
                this.buy.num++;
                if(this.buy.num>6){
                    this.buy.num=6;
                    this.$message("每笔订单最多可选购6张电影票");
                    return;
                }
                i.state = 1;
                this.buy.sits.push(i)
            },
            next(){
                //传座位号和手机号、排片
                let sitnums = "";
                this.buy.sits.forEach(s=>{
                    sitnums += s.sit + ";";
                });
                sitnums = sitnums.substring(0,sitnums.lastIndexOf(";"));
                location.href=`order.html?sid=${this.id}&phone=${this.phone}&sitnum=${sitnums}`
            }
        },
        created(){
            this.id = location.search.split("=")[1];
            this.getScheduleInfo();
        }
    })
</script>
<style>
    html,body{
        margin: 0px;
        padding: 0px;
    }
    .el-main{
        padding: 10px 0px;
        overflow-x: hidden;
        background-image: url("https://img2.baidu.com/it/u=2454799735,2381918605&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500");
        background-size: cover;
    }
    .el-card{
        margin-top: 10px;
    }
    html,body,#app,#app>.el-container{
        height: 100%;
    }
    *{
        transition: all .5s;
    }
    a{
        text-decoration: none;
    }
    .c900{
        width: 1000px;
        margin: auto;
    }
    .title{
        background-color: #0a699999;
        color: #fff;
    }
    .title *{
        color: #fff;
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        gap: 10px;
    }
    .flex>*{
        margin: 0px;
        padding: 0px;
    }
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav{
        display: flex;
        height: 100%;
    }
    nav .el-link{
        padding-inline: 20px;
        font-size: 1em;
    }
    nav .el-link:hover{
        background-color: #99f7;
    }
    img{
        width: 100%;
        object-fit: cover;
    }
    .hsc:hover{
        transform: scale(1.1);
        box-shadow: 3px 3px 3px 3px #8888;
    }
    .grid2{
        display: grid;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    .detail{
        color:#666;
        font-size: .8em;
        gap:5px;
        margin-block: 10px;
    }
    .detail>label{
        color:#999
    }
    table a{
        text-decoration: none;
        color: #fff;
        padding: 5px 10px;
        background-color: #00A0D1;
    }
    td{
        height: 50px;
    }
    td>p{
        margin: 0px;
    }
    .table_1 {
        height: 37px;
        line-height: 37px;
        background: #dff0f5;
        border: 1px #ccc solid;
        text-align: center;
        font-weight: bold;
        color: #444;
    }
    .seats{
        width: 500px;
        margin: 0px auto 40px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .seat{
        width: 40px;
        height: 40px;
        cursor: pointer;
    }
    .el-icon-search{
        color: #666;
    }
    #name{
        color: #444444;
    }

</style>

</html>